<template>
    <div>
        <header class="header">
          <mt-header title="营养食谱">
                <router-link to="/food" slot="left">
                    <mt-button icon="back"></mt-button>
                </router-link>
            </mt-header>
        </header>
        <div class="content">
            <div class="left">
                <p v-for="(item, i) in list" :key="i">{{item}}</p>
            </div>
            <div class="right">
                <div class="con">
                    <p>孕期</p>
                    <div class="aa">
                        <div class="bbb">
                            <div class="bbbb"></div>
                            <span>孕早期</span>
                        </div>
                        <div class="bbb">
                            <div class="bbbb"></div>
                            <span>孕早期</span>
                        </div>
                        <div class="bbb">
                            <div class="bbbb"></div>
                            <span>孕早期</span>
                        </div>
                    </div>
                </div>

                <div class="con">
                    <p>产后</p>
                    <div class="aa">
                        <div class="bbb">
                            <div class="bbbb"></div>
                            <span>刚生产</span>
                        </div>
                        <div class="bbb">
                            <div class="bbbb"></div>
                            <span>孕早期</span>
                        </div>
                        <div class="bbb">
                            <div class="bbbb"></div>
                            <span>孕早期</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:'Foodyysp',
    data() {
        return {
           list:[
               '阶段',
               '功绩',
               '五谷',
               '肉类',
               '海鲜',
               '菌类',
               '水果类',
               '豆脂类',
               '坚果类'
           ],
            handleClose(){
            }
        }   
    }
}
</script>

<style scoped>
    .left{
        width:20%;
        border-right: 1px solid #cccccc;
        height: 95%;
        float: left;
    }
    .left p{
        width: 100%;
        height: 8%;
        text-align: center;
        line-height: 64px;
        font-size: 16px !important;
    }
    .right{
        width: 79%;
        float: right;
    }
    .con{
        width: 100%;
    }
    .con p{
        margin-top: 24px;
        margin-left: 20px
    }
    .con .aa{
        display: flex;
        justify-content: space-around;
        padding: 13px
    }
    .bbbb{
        width: 70px;
        height: 70px;
        background: #cccccc;
        border-radius: 10px;
    }
    .bbb{
        width: 70px;
        height: 100px;
    }
    .bbb span{
        width: 70px;
        height: 30px;
        line-height: 30px;
        margin-top: 5px;
        text-align: center;
        display: inline-block;
        font-size: 12px !important;
    }
</style>
